<template>
  <div
    class="w-100 jdgxcdtj"
    style="height: 100%; overflow-y: auto; overflow-x: hidden"
  >
    <div
      id="jdgxcdtj"
      class="w-100"
      style="height: 1000px; position: relative"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useFunc } from "@/hook/useFunc";

const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});

let option = {
  grid: {
    left: "%",
    right: "1%",
    bottom: "10%",
    top: "1%",
    containLabel: true,
  },
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: {
          color: "#00dcf1",
          fontSize: 19,
          fontFamily: "siyuan",
          fontStyle: "italic",
        },
      },
      // 设置自定义字体样式
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: props.echartsData.map((item: any) => item.name),
    },
    {
      zlevel: 3,
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: "rgba(92, 225, 255, 1)",
          fontSize: "30",
          padding: [0, 0, 0, -3],
          fontFamily: "DIN-Bold",
          offset: 20,
        },
        formatter: "{value} m",
      },
      data: props.echartsData.map((item: any) => parseInt(item.value)),
    },
  ],
  series: [
    {
      name: "人数",
      type: "bar",
      zlevel: 3,
      itemStyle: {
        normal: {
          //barBorderRadius: [0, 30, 30, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(4,128,224,0.3)",
            },
            {
              offset: 1,
              color: "#01F1E4",
            },
          ]),
          shadowBlur: 0,
          shadowColor: "rgba(87,220,222,0.7)",
        },
      },
      barWidth: 15,
      data: props.echartsData.map((item: any) => parseInt(item.value)),
    },
    {
      z: 1,
      type: "pictorialBar",
      symbolPosition: "end",
      symbolRotate: "180",
      symbolSize: [20, 15],
      color: "01F1E4",
      data: props.echartsData.map((item: any) => parseInt(item.value)),
      symbol: "triangle",
      symbolOffset: ["52%", 0],
    },
    {
      // 背景
      type: "pictorialBar",
      animationDuration: 0,
      hoverAnimation: false,
      symbolRepeat: "fixed",
      label: {
        show: false,
        position: ["97%", "40%"],
        fontSize: 20,
        color: "#01F1E4",
      },
      legendHoverLink: false,
      symbolMargin: "10%",
      symbol: "roundRect",
      symbolSize: [5, 35],
      itemStyle: {
        normal: {
          color: "#12272A",
        },
      },
      data: props.echartsData.map((item: any) => parseInt(item.value)),
      z: 0,
    },
  ],
};
onMounted(() => {
  let myChart = echarts.init(
    document.getElementById("jdgxcdtj") as HTMLElement
  );
  myChart.setOption(option);
  const scrollContainer = document.querySelector(".jdgxcdtj");
  useFunc().autoScroll(scrollContainer, "vertical");
});
</script>

<style></style>
